<template>
    <div>
        <div class="topInfo">
            <el-button
                    @click="handleBackHome"
                    class="back"
                    icon="el-icon-arrow-left"
                    type="primary"
                    round>返回订单</el-button>
            <span>订单总价：{{list.total_price}}</span>
            <el-button
                    v-if="shipVisible"
                    @click="handleShip"
                    class="ship"
                    icon="el-icon-check"
                    type="success"
                    round>确认发货
            </el-button>
        </div>
        <div class="orderTableBox">
            <el-table :data="list.goods" border style="width: 1411px">
                <el-table-column prop="thumbnail" label="商品图片" width="180" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.thumbnail" class="orderGoodsImage"/>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" width="550" align="center">
                </el-table-column>
                <el-table-column prop="sku_value" label="商品规格" width="480" align="center">
                </el-table-column>
                <el-table-column prop="price" label="商品单价" width="100" align="center">
                </el-table-column>
                <el-table-column prop="number" label="购买数量" width="100" align="center">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'orderInfo',
        data() {
            return {
                list: [],
                loading: false,
                shipVisible: true
            }
        },

        methods: {
            defaultData() {
                this.loading = true
                var id = this.$route.query.id;
                this.$http.get('/agent/turnover/info', {
                    params: {
                        token: localStorage.getItem('user_token'),
                        id: id
                    }
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.list = [];
                        this.list = response.data.data
                    }

                    if (this.$route.query.type === 'enter' || this.$route.query.type === 'check'){
                        this.shipVisible = false;
                    }
                    this.loading = false
                }).catch(error => {
                    console.log(error);
                    this.loading = false;
                })
            },

            //确认发货
            handleShip(){
                this.loading = true;
                this.$http.get('agent/turnover/status',{
                    params:{
                        token: localStorage.getItem('user_token'),
                        status: 2,
                        id: this.list.id
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.$message.success('发货成功');
                        this.handleBackHome();
                    }
                    this.loading = false;
                }).catch(error => {
                    console.log(error);
                    this.loading = false;
                })
            },

            handleBackHome(){
                var type = this.$route.query.type;

                if (type === 'enter'){
                    this.$router.push({name: 'orderEnter'});
                }

                if (type === 'out'){
                    this.$router.push({name: 'orderOut'});
                }

                if (type === 'check'){
                    this.$router.push({name: 'checkOrder'});
                }
            }
        },

        mounted() {
            this.defaultData();
        }
    }
</script>

<style>
    .orderGoodsImage {
        width: 110px;
        height: 70px;
    }

    .orderTableBox {
        margin-left: 150px;
    }

    .topInfo{
        width: 100%;
        height: 100px;
        line-height: 100px;
    }

    .topInfo span{
        margin-left: 50px;
    }

    .topInfo .ship{
        margin-top: 30px;
        margin-right: 150px;
        float: right;
    }
    
    .topInfo .back{
        margin-top: 30px;
        margin-left: 150px;
        float: left;
    }
</style>